<template>
  <div class="realTimeData">
    <div class="realTimeData-box">
      <!--左-->
      <div class="left-box">
        <div class="item-box">
            <div class="todyUseing">
                <div class="top-tools">
                    <h3>场地今日使用情况</h3>
                </div>
                <div class="use-list-box">
                    <div class="use-items" v-for="(item,index) in todyPlaceUseInfoList" :key="index">
                        <div class="pie-item" :class="'pie-item-'+index">
                            {{item.percentage+'%'}}
                        </div>
                        <h4>{{item.placeName}}</h4>
                        <div class="use-info">
                            <div>使用人数：<span>{{item.number}}</span></div>
                            <div>使用次数：<span>{{item.frequency}}</span></div>
                            <div>使用时长：<span>{{item.hour}}h</span></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="item-box">
            <div class="jifen-content">
                <div class="top-tools">
                    <h3>积分兑换情况</h3>
                </div>
                <div class="jifen-discription">
                    <div class="left-bg" :style="{'background-image':'url('+jiFenData.image+')'}"></div>
                    <div class="right-text">
                        <div class="right-text-item">
                            <p class="value">{{jiFenData.totalOfPeople}}</p>
                            <p class="title-text">今日兑换总人数</p>
                        </div>
                        <div class="right-text-item">
                            <p class="value">{{jiFenData.totalOfGoods}}</p>
                            <p class="title-text">今日兑换商品数</p>
                        </div>
                        <div class="right-text-item">
                            <p class="value">{{jiFenData.totalOfScores}}</p>
                            <p class="title-text">今日消耗金币数</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="item-box">
            <div class="huogui-table">
                <el-table class="table-content" :data="RecordRecent" size="mini" border style="width: 100%">
                <el-table-column prop="name" label="兑换商品" width="105"></el-table-column>
                <el-table-column prop="payUserName" label="操作人" width="60"></el-table-column>
                <el-table-column prop="payScore" label="金币消耗" width="75"></el-table-column>
                <el-table-column prop="finishTime" label="兑换时间" width="140">
                    <template slot-scope="scope">
                        {{formatDate(scope.row.finishTime)}}
                    </template>
                </el-table-column>
                </el-table>
            </div>
        </div>
      </div>
      <!--中-->
      <div class="center-box">
        <div class="item-box">
            <div class="activeTime-box">
                <div class="top-tools">
                    <h3>学生活动时间分布</h3>
                </div>
                <shijianFenbu/>
            </div>
            <!-- <img class="img" src="@/assets/huodongshijian.png" /> -->
        </div>
        <div class="item-box">
            <div class="thisWeek-box">
                <div class="top-tools">
                    <h3>近一周场地使用分析</h3><label></label>
                </div>
                <changDiFenXi/>
                
            </div>
            <!-- <img class="img" src="@/assets/changdi.png" /> -->
        </div>
        <div class="item-box">
            <div class="huogui-table">
                <el-table class="table-content" :data="todyNewData" size="mini" border style="width: 100%">
                <el-table-column prop="bookDate,startTime,endTime" label="时间" >
                    <template slot-scope="scope">
                        {{scope.row.bookDate+' '+scope.row.startTime+'~'+scope.row.endTime}}
                    </template>
                </el-table-column>
                <el-table-column prop="placeName" label="场地名称"></el-table-column>
                <el-table-column prop="activityName" label="活动名称"></el-table-column>
                </el-table>
            </div>
        </div>
      </div>
      <!--右-->
      <div class="right-box">
        <div class="item-box">
          <div class="face-record">
            <div class="top-tools">
              <h3>人脸识别记录</h3>
            </div>
            <div class="face-content">
              <div class="face-bg-box">
                <h3 class="name">{{faceData.name?faceData.name:'***'}}</h3>
                <p>{{faceData.recordTime?formatDate(faceData.recordTime):''}}</p>
                <!-- <h3 class="tips">祝你生日快乐！</h3> -->
              </div>
            </div>
          </div>
        </div>
        <div class="item-box" style="min-height:318px">
          <zhiNengChuWuGuiShiYong />
        </div>
        <div class="item-box">
          <div class="huogui-table">
            <el-table class="table-content"  :data="containerTable" size="mini" border style="width: 100%">
              <el-table-column prop="cabinetNo" label="货柜编号" width="80"></el-table-column>
              <el-table-column prop="createUser" label="操作人" width="75"></el-table-column>
              <el-table-column prop="result" label="状态" width="80"></el-table-column>
              <el-table-column prop="createTime" label="操作时间" width="145">
                  <template slot-scope="scope">
                      {{formatDate(scope.row.createTime)}}
                  </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import zhiNengChuWuGuiShiYong from "@/components/zhiNengChuWuGuiShiYong";
import changDiFenXi from "@/components/changDiFenXi";
import shijianFenbu from "@/components/shijianFenbu";
import $api from "@/axios/apiConfig"; //接口
import axios from "@/axios"; //请求
export default {
  components: {
    zhiNengChuWuGuiShiYong,
    changDiFenXi,
    shijianFenbu
  },
  data() {
    return {
      containerTable: [], //货柜编号表格数据
      jiFenData:{},
      RecordRecent:[],
      todyNewData:[],
      todyPlaceUseInfoList:[],
      faceData:{},
      timer:null
    };
  },
  methods:{
      getContainerData(){
        axios.get($api.api+'/smart-uttc/cabinet-open-log/white/getOpenInfoList').then(res => {
                if (res) {
                    this.containerTable = res.data;
                }
        });
      },
      formatDate(timestamp,type) {
        if(timestamp!==null && timestamp != '--'){
        var date = new Date(parseInt(timestamp));//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        var D = date.getDate() <10 ? '0' + date.getDate()+' ':date.getDate()+' ';
        var h = (date.getHours() >= 10 ? date.getHours() : '0' + date.getHours()) + ':';
        var m = (date.getMinutes() >= 10 ? date.getMinutes() : '0' + date.getMinutes()) + ':';
        var s = (date.getSeconds() >= 10 ? date.getSeconds() : '0' + date.getSeconds());
        if(type==1){
            return Y + M + D;
        }else if(type==3){
            return M + D;
        }else{
            return Y + M + D + h + m + s;
        }
        }else{
        return '--'
        }
    },
    //获取积分兑换情况
    getJiFenData(){
        axios.get($api.api+'/smart-uttc/shop/getPayStatistics').then(res => {
                if (res) {
                 
                    this.jiFenData = res.data;
                }
        });
    },
    //获取最新的兑换记录
    getPayRecordRecent(){
        axios.get($api.api+'/smart-uttc/shop/getPayRecordRecent').then(res => {
                if (res) {

                    this.RecordRecent = res.data;
                }
        });
    },
    //今日最新预约信息 
    getTodayBookList(){
        axios.get($api.api+'/smart-uttc/place-book/white/getTodayBookList').then(res => {
                if (res) {
                    this.todyNewData = res.data;
                }
        });
    },
    //场地今日使用情况 
    getPlaceUseInfoList(){
        axios.get($api.api+'/smart-uttc/place-book/white/getPlaceUseInfoList').then(res => {
                if (res) {
                    this.todyPlaceUseInfoList = res.data;
                }
        });
    },
    //人脸抓拍数据 
    newCapture(){
        axios.get($api.api+'/smart-uttc/captureLog/white/newCapture').then(res => {
                if (res) {
                    this.faceData = res.data;
                }
        });
    },
  },
  mounted(){
      this.getContainerData();
      this.getJiFenData();
      this.getPayRecordRecent();
      this.getTodayBookList();
      this.getPlaceUseInfoList();
      this.newCapture();
      this.timer = setInterval (()=>{
            this.getContainerData();
            this.getJiFenData();
            this.getPayRecordRecent();
            this.getTodayBookList();
            this.getPlaceUseInfoList();
            this.newCapture();
      },5*60*1000);
  },
    beforeDestroy() {
        clearInterval(this.timer);        
        this.timer = null;
    } 
};
</script>
<style>
    .el-table th, .el-table tr{
        background-color: transparent;
        background:rgba(32,34,36,1);
        color: #fff;
    }
    .el-table--mini td, .el-table--mini th{
        padding: 8px 0;
    }
    .el-table--mini th{
        background:rgba(42,85,255,0.4);
    }
    .el-table td, .el-table th.is-leaf{
        border-bottom: 1px solid #2A55FF;
        border-right: 1px solid #2A55FF;
    }
    .el-table--enable-row-hover .el-table__body tr:hover>td{
        background-color: rgba(32,34,36,1);
    }
    .el-table::before,.el-table::after{
        background-color: #2A55FF;
    }
    .el-table--border, .el-table--group{
        border: 1px solid #2A55FF;
        border-right: none;
        border-bottom: none;
    }
    .el-table__empty-block{
        background-color: rgba(32,34,36,1);
    }
</style>
<style lang="scss" scoped>
.realTimeData {
  .realTimeData-box {
    display: flex;
    justify-content: space-between;
    .left-box,
    .right-box {
      width: 423px;
    }
    .center-box {
      flex: 1;
      margin: 0 20px;
    }
    .item-box {
      background: rgba(32, 34, 36, 1);
      border: 1px solid rgba(66, 67, 69, 1);
    }
    .item-box + .item-box {
      margin-top: 20px;
    }
  }
  .face-record {
    padding: 12px 20px;
    
    .face-content {
      padding: 15px;
      .face-bg-box {
        height: 226px;
        box-sizing: border-box;
        padding: 50px 0 50px 180px;
        background: url(../../assets/face-bg.png) no-repeat center center;
        background-size: 100% 100%;
        .name {
          font-size: 20px;
          color: #fff;
          line-height: 20px;
          margin-bottom: 15px;
        }
        .tips {
          font-size: 20px;
          color: #ffb73b;
          line-height: 20px;
        }
        p {
          font-size: 14px;
          line-height: 14px;
          margin-bottom: 40px;
        }
      }
    }
  }
  .top-tools {
      display: flex;
      justify-content: space-between;
      align-items: center;
      h3 {
        font-size: 16px;
        height: 16px;
        line-height: 16px;
        padding-left: 10px;
        border-left: 4px solid #00ffee;
        margin-bottom: 20px;
      }
    }
  .huogui-table {
      padding: 20px;
      box-sizing: border-box;
    height: 279px;
  }
  .todyUseing{
      padding: 20px;
      box-sizing: border-box;
      min-height: 406px;
      .use-list-box{
          .use-items{
              padding: 17px 0 18px;
              position: relative;
              padding-left: 80px;
              border-bottom: 1px solid #121212;
              h4{
                  font-size: 14px;
                  color: #fff;
                  line-height: 14px;
                  margin-bottom: 16px;
              }
              .use-info{
                  display: flex;
                  justify-content: space-between;
                  div{
                      font-size: 12px;
                      color: rgba($color: #fff, $alpha: .6);
                      span{
                          font-size: 14px;
                          color: #00FFEE;
                      }
                  }
              }
              .pie-item{
                  width: 60px;
                  height: 60px;
                  position: absolute;
                  left: 0;
                  top: 15px;
                  background-size: 100% 100%;
                  border-radius: 50%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  font-size: 14px;
                  color:#00FFEE;
              }
              .pie-item-0{
                  background: url(../../assets/percentage01.png) no-repeat center center;
                  background-size: 100% 100%;
              }
              .pie-item-1{
                    background: url(../../assets/percentage02.png) no-repeat center center;
                  background-size: 100% 100%;
              }
              .pie-item-2{
                  background: url(../../assets/percentage03.png) no-repeat center center;
                  background-size: 100% 100%;
              }
              .pie-item-3{
                  background: url(../../assets/percentage04.png) no-repeat center center;
                  background-size: 100% 100%;

              }
          }
      }
  }
  .jifen-content{
      padding: 19px;
      .jifen-discription{
          display: flex;
          justify-content: space-between;
          .left-bg{
              width: 208px;
              height: 154px;
              background-size: 100% 100%;
          }
          .right-text{
              flex: 1;
              margin-left: 20px;
              .right-text-item{
                  .value{
                      font-size: 14px;
                      color: #00FFEE;
                      line-height: 14px;
                      margin-bottom: 4px;
                  }
                  .title-text{
                      font-size: 12px;
                      line-height: 12px;
                      color: rgba($color: #fff, $alpha: .6);
                  }
              }
              .right-text-item+.right-text-item{
                  margin-top: 20px;
              }
          }
      }
  }
  .activeTime-box{
      padding: 20px;
  }
  .thisWeek-box{
      padding: 20px;
  }
  .img{
      width: 100%;
      height: 100%;
  }
}
</style>